<script setup>

import { Message, Upload, Edit, Share, Delete, Eleme } from '@element-plus/icons-vue'
</script>
<template>
    <!-- elements-plus按钮 -->
    <div class="mb-4">
        <!-- type定义按钮的颜色 -->
        <!-- plain为默认白色 -->
        <!-- 有plain,round,circle来设置按钮类型 -->
        <el-button>默认按钮</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button plain>plain</el-button>
        <el-button round type="success">Round</el-button>
        <!-- :icon后面的是图标，需要单独引入，图标按钮，可以通过加i标签来加文字 -->
        <el-button type="info" :icon="Message" circle>

        </el-button>
        <el-button type="primary">
            Upload
            <i>
                <el-icon class="el-icon--right">
                    <Upload />
                </el-icon>
            </i>

        </el-button>
        <br />
        <!-- disabled来定义按钮是否被禁用 -->
        <el-button type="warning" disabled>disabled</el-button>
        <!-- 链接按钮是没有样式的，跟a标签很相似 -->
        <el-button link style="background-color: pink;">链接按钮</el-button>
        <!-- 文字按钮聚焦会显示背景色，bg为不聚焦显示颜色 -->
        <el-button text round bg style="background-color: pink;">文字按钮</el-button>
        <!-- 按钮组，在el-button-group中写 -->
        <el-button-group class="ml-4">
            <el-button type="primary" :icon="Edit" />
            <el-button type="primary" :icon="Share" />
            <el-button type="primary" :icon="Delete" />
        </el-button-group>
        <br />
        <!-- 默认会将全部变为加载图标 -->
        <el-button loading :icon="Edit">loading</el-button>
        <!-- loading-icon将默认图标变为后面的属性 -->
        <el-button loading :loading-icon="Eleme">loading</el-button>
        <h1>尺寸</h1>
        <el-button size="large">large</el-button>
        <el-button>default</el-button>
        <el-button size="small">small</el-button>
    </div>
</template>